<template>
  <div class="pagination-table">
    <!-- 表格组件 -->
    <div class="data-list">
      <el-table
        :data="tableData"
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        border
        lazy
        row-key="id"
        ref="multipleTable"
        stripe
        style="width: 100%"
      >
        <!-- 多选框 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 动态遍历表头和数据 -->
        <el-table-column
          :key="item.id"
          :label="item.keyword_zh"
          :prop="item.keyword"
          v-for="item in tableLabel"
        >
          <template slot-scope="scope">
            <el-link
              :href="scope.row[item.url]"
              :underline="false"
              type="primary"
              v-if="item.type === 'url'"
            >{{scope.row[item.keyword]}}</el-link>
            <span v-else-if="item.type === 'html'" v-html="scope.row[item.keyword]"></span>
            <span v-else>{{scope.row[item.keyword]}}</span>
          </template>
        </el-table-column>
        <!-- 操作按钮列表 -->
        <el-table-column fixed="right" label="操作" v-if="operateButton">
          <template slot-scope="scope">
            <slot v-bind:scope="scope"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="data-pagination">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  name: 'PaginationTable',
  props: {
    tableData: Array,
    tableLabel: Array,
    pageSizes: Array,
    pageSize: Number,
    total: Number,
    currentPage: Number,
    operateButton: Boolean
  },
  data() {
    return {
      // multipleSelection: []
    }
  },
  computed: {
    pager() {
      return {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      var params = {
        tree: tree,
        treeNode: treeNode,
        resolve: resolve
      }
      this.$emit('load', params)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //查看按钮事件
    handleClick(row) {},
    //多选框事件
    handleSelectionChange(val) {
      this.$emit('changeSelection', val)
    },
    //改变每页条数事件
    handleSizeChange(val) {
      this.pager.pageSize = val
      // this.pager.currentPage = 1;
      this.$emit('changePager', this.pager)
    },
    //改变页码事件
    handleCurrentChange(val) {
      this.pager.currentPage = val
      this.$emit('changePager', this.pager)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-table {
  text-align: center;
  .data-pagination {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
</style>
